<template>
  <div>
    <div class="title_div">
      <div class="box">
        <div>权限设置</div>
        <div class="box-button">
          <el-button icon="el-icon-arrow-left" @click="reverse">返回</el-button>
          <el-button icon="el-icon-refresh" @click="renovate">刷新</el-button>
        </div>
      </div>
    </div>
    <!-- 整体 -->
    <div class="privilege">
      <!-- 头部 -->
      <div class="header">
        <p class="header-role">
          当前角色:<span class="uname">{{ username }}</span>
        </p>
      </div>
      <!-- 商品管理 -->
      <table cellspacing="0" v-for="item in list">
        <thead>
          <tr>
            <tr>
              <td colspan="6"><input type="checkbox">{{ item.list_name }}</td>
            </tr>
          </tr>
        </thead>
        <tbody v-for="it in item.data">
          <tr>
            <td><input type="checkbox">{{ it }}</td>
            <td><input type="checkbox">{{ it }}</td>
            <td><input type="checkbox">{{ it }}</td>
            <td><input type="checkbox">{{ it }}</td>
            <td><input type="checkbox">{{ it }}</td>
            <td><input type="checkbox">{{ it }}</td>
          </tr>
        </tbody>
      </table>
      <div class="all">
        <input type="checkbox">选择全部
      </div>
      <div class="button">
        <button type="button">保存</button>
      </div>
    </div>
    <!-- 页面下层数据 -->
      <div class="bottom">
        <div>Copyright © www.AxureUX.com, All Rights Reserved.</div>
        <div>Email: 5698401@qq.com QQ:5698401</div>
      </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "销售员",
      list: [
        {
          id: 1,
          list_name: "商品管理",
          data: {
            data_power: "商品管理",
            data_permission: "商品管理",
            data_authority: "商品管理",
          },
        },
        {
          id: 2,
          list_name: "订单管理",
          data: {
            data_power: "订单管理",
            data_permission: "订单管理",
            data_authority: "订单管理",
          },
        },
        {
          id: 3,
          list_name: "用户管理",
          data: {
            data_power: "用户管理",
            data_permission: "用户管理",
            data_authority: "用户管理",
          },
        },
        {
          id: 4,
          list_name: "促销管理",
          data: {
            data_power: "促销管理",
            data_permission: "促销管理",
            data_authority: "促销管理",
          },
        },
        {
          id: 5,
          list_name: "运营管理",
          data: {
            data_power: "运营管理",
            data_permission: "运营管理",
            data_authority: "运营管理",
          },
        },
      ],
    };
  },
  components: {},
  computed: {},
  methods: {
    reverse() {
      this.$router.go(-1);
    },
    renovate() {
      this.$router.go(0);
    },
  },
};
</script>
<style lang='scss' scoped>
.title_div {
  background: #f3f3f3;
  height: 50px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #e4e4e4;
}

.box {
  width: 85%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .el-button {
    height: 40px;
  }

  div {
    height: 15px;
    line-height: 15px;
    border-left: 6px solid #1abc9c;
    padding: 4px;
  }
  .box-button {
    border: none;
    height: 50px;
    line-height: 50px;
  }
}
.privilege {
  width: 85%;
  margin: 30px auto;
  // background: #ffffff;
  background: white;
  .header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #f3f3f3;
    .header-role {
      text-align: left;
      margin-left: 20px;
    }
    .uname {
      margin-left: 10px;
    }
  }
  table {
    width: 95%;
    margin: 30px auto;
    thead {
      background: #f9fafc;
    }
    tbody {
      background: white;
    }
    td {
      width: 150px;
      height: 56px;
      text-align: left;
      padding-left: 20px;
      border: 1px solid #e4e4e4;
    }
  }
  .all {
    width: 95%;
    height: 60px;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    background: #f9fafc;
  }
  .button {
    width: 100%;
    text-align: center;
    padding: 60px 0;
    button {
      width: 100px;
      height: 40px;
      border: none;
      font-size: 20px;
      color: white;
      border-radius: 6px;
      background: #48c9b0;
    }
  }
}
input {
  margin-right: 4px;
}
.bottom {
  width: 100%;
  height: 100px;
  font-size: 14px;
  color: rgb(218, 218, 218);
  text-align: center;
}
</style>
